<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :lg="12">
				<el-card shadow="never" header="批量导入">
					<el-form :model="form" :rules="rules" ref="dialogForm"
							 label-width="110px"
							 label-position="left">
						<el-form-item label="上传模板" prop="file">
							<el-input type="file" v-model="form.file" placeholder="请上传模板文件" ref="fileInput" @change="onFileChange"></el-input>
							<div class="el-upload__tip" style=";">
								<span class="color">支持Excel格式，单次最多支持下单1000条数据，如超过请分多次操作</span>
							</div>
						</el-form-item>
						<el-form-item>
							<el-span style="color:red">{{ importMsg }}</el-span>
						</el-form-item>
						<el-button icon="el-icon-download" @click="downloadTpl()">下载导入模板
						</el-button>
						<el-row style="float: right">
							<el-col :span="2">
								<el-form-item>
									<el-button type="primary" :loading="isSaveing" @click="submit()">确定导入</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-card>
			</el-col>
			<el-col :lg="12">
				<el-card shadow="never" header="导入结果">
					<el-tabs tab-position="top" ref="tabs" v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="导入成功" name="importsuccess">
							<el-table :data="successTableData" style="width: 100%" height="250">
								<el-table-column fixed prop="mobile" label="手机号" width="180"/>
								<el-table-column prop="service_code" label="激活码" width="180"/>
								<el-table-column prop="error" label="内容" width="180"/>
							</el-table>
						</el-tab-pane>
						<el-tab-pane label="导入失败" name="importfailed">
							<div class="right-panel" v-if="fiailedTableData.length>0">
								<el-button icon="el-icon-download" @click="downloadFailedData">下载失败数据
								</el-button>
							</div>
							<el-table :data="fiailedTableData" style="width: 100%" height="250">
								<el-table-column fixed prop="mobile" label="手机号" width="180"/>
								<el-table-column prop="error" label="内容" width="180"/>
							</el-table>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>
<script>
export default {
	name: 'serviceOrderImport',
	components: {},
	data() {
		return {
			isSaveing: false,
			activeName: "importsuccess",
			form: {
				file: null,
				company_order_sn: this.$route.query.company_order_sn,
			},
			//验证规则
			rules: {
				file: [
					{required: true, message: '请上传导入文件', trigger: 'change'}
				]
			},
			successTableData: [],
			fiailedTableData: [],
			failedDownLoadUrl: "",
			importMsg: "",
		}
	},
	mounted() {

	},
	methods: {
		getCompanyList() {
			this.$API['company.company'].getCompanyList.get().then((res) => {
				if (res.code == 0) {
					this.companyList = res.data;
				}
			}).catch((msg) => {
				this.$alert(msg, "提示", {type: 'error'})
			})
		},
		onFileChange(e) {
			console.log(e);
			// this.form.file = e.target.files[0];
		},
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					const fileInput = this.$refs.fileInput.$el.querySelector('input[type=file]')
					const file = fileInput.files[0]
					const formData = new FormData()
					formData.append('company_order_sn', this.form.company_order_sn)
					formData.append('file', file)
					let config = {
						headers: {'Content_type': 'multipart/form-data'},
					}
					this.isSaveing = true;
					console.log('------------', formData, this.form)
					this.$API['company.company_order'].import.post(formData, config)
						.then((res) => {
							if (res.code == 0) {
								this.successTableData = res.data['success_data'];
								this.fiailedTableData = res.data['failed_data'];
								if (res.data['failed_data'].length > 0) {
									this.activeName = 'importfailed';
								}
								this.failedDownLoadUrl = res.data['download_url'];
								this.importMsg = res.msg;
								this.$emit('success', this.form, this.mode)
								this.$message.success("操作成功")
								this.resetform();
							} else {
								this.$alert(res.message, "提示", {type: 'error'})
							}
						})
						.catch((msg) => {
							this.$alert(msg, "提示", {type: 'error'})
						})
						.finally(() => {
							this.isSaveing = false;
						});
				} else {
					return false;
				}
			})
		},
		downloadFailedData() {
			window.open(this.failedDownLoadUrl);
		},
		downloadTpl() {
			this.$API['common'].getImportTemplate.get({file_type: 3}).then((res) => {
				window.open(res.data.jump_url);
			}).catch((msg) => {
				this.$alert(msg, "提示", {type: 'error'})
			})
		},
		//重置
		resetform() {
			this.form = {
				file: null,
			}
		},
	}
}
</script>

<style>
</style>
